<template>
  <Previewer ref="viewer" style="padding: 0; margin: 0" />
</template>
<script lang="ts" setup>
import type { ComponentDataType } from "@/RtDataView/RonTonDataView";
import {
  Previewer,
  useSnapshotState,
  useUserStoreWithOut
} from "@/RtDataView/RonTonDataView";
import { getSeeList } from "@/api/seeList.ts";
import { ref, onMounted, reactive } from "vue";
const viewer = ref();
const url = ref("");
url.value = window.location.href;
const form = reactive({
  appId: url.value.substring(url.value.indexOf("/index") + "/index".length)
});
const snapShotState = useSnapshotState(); //获取预览数据
const userData = useUserStoreWithOut();

onMounted(async () => {
  //设置Token，以便访问服务器数据
  userData.setToken(
    "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiMTU1MDQiLCJ1c2VyQWNjb3VudCI6IjIwMDQwMDA1IiwidXNlck5pQ2hlbiI6IuadjuaIkCIsImRhdGFSb3ciOiLns7vnu5_nrqHnkIblkZgs5pWZ5biILOWtpueUnyzlupTmgKXnrqHnkIblkZgs6Zeo5bKXLOaZrumAmueUqOaItyzosIPnj63nrqHnkIblkZgs57u05L-d566h55CG5ZGYLOadpeiuv-euoeeQhuWRmCIsInVzZXJUYWJsZSI6IuaVmeW4iOS_oeaBr-ihqCIsInVzZXJJRCI6IjEiLCJ1c2VyUm93cyI6IkFkbWluIiwiaHR0cDovL3NjaGVtYXMubWljcm9zb2Z0LmNvbS93cy8yMDA4LzA2L2lkZW50aXR5L2NsYWltcy9yb2xlIjoiYWRtaW4iLCJuYmYiOjE3MTYwODk1MDUsImV4cCI6MTcxNjA5NjcwNSwiaXNzIjoicm9udG9uLmNuIiwiYXVkIjoicm9udG9uLmNuIn0.QxYzElzcvmsWjZ7S3O8zYjgvetINtD2YZ_nTESKOHFY"
  );
  const snapshot = await snapShotState.latestRecord();
  // 拉取数据
  const res = await getSeeList(form);
  if (res.isSuccess) {
    viewer.value!.setLayoutData({
      canvasData: JSON.parse(res.result.dataViewStr)
        .canvasData as ComponentDataType[]
    });
  }
  console.log("shownew.vue", res.result.dataViewStr);
  if (snapshot) {
    viewer.value!.setLayoutData({
      //canvasData: snapshot.canvasData as ComponentDataType[],
      canvasStyle: snapshot.canvasStyle,
      dataSlotters: snapshot.dataSlotters
    });
  }
});
</script>
